<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="../element/latest/element.css" media="all">
    <link rel="stylesheet" href="../vue-table/3.2.1/style.css" media="all">
    <script type="text/javascript" src="../vue/es6-promise.auto.min.js"></script>
    <script type="text/javascript" src="../vue/es6-promise.auto.min.js"></script>
    <script type="text/javascript" src="../vue/browser.min.js"></script>
    <script type="text/javascript" src="../vue/browser-polyfill.min.js"></script>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="../vue/axios.js"></script>
    <script type="text/javascript" src="../element/latest/element.js"></script>
    <script type="text/javascript" src="../vue-table/3.2.1/xe-utils.js"></script>
    <script type="text/javascript" src="../vue-table/3.2.1/vxe-table.js"></script>
    <script type="text/javascript" src="../../../editor/assets/drag/js/lib/mc/magicaltool.js"></script>
    <script type="text/javascript" src="../mc/mc-new-vxe-table.js"></script>
    <script type="text/javascript" src="../mc/official-ui.js"></script>
</head>
<body style="">
<div id="magicalDragScene">
<!--    查询框-->
    <el-form :model="userForm">
        <el-form-item label="用户名:" :label-width="userDialog.formLabelWidth">
            <el-input v-model="userForm.username" autocomplete="off" style="width:18%" clearable></el-input>
            <el-select v-model="userForm.roleUuids" filterable placeholder="请选择角色">
                <el-option
                    v-for="item in roleOptions"
                    :key="item.uuid"
                    :label="item.name"
                    :value="item.uuid">
                </el-option>
            </el-select>
            <el-select v-model="userForm.enabled" filterable placeholder="请选择激活状态">
                <el-option
                    v-for="item in activeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-button size="small" @click="getProjectUser">查询</el-button>
        <el-button size="small" type="primary" @click="restuserForm">重置</el-button>
        <el-button size="small" type="success" @click="insertUser">新增</el-button>
        <el-button size="small" type="success" @click="excelTemplate">EXCEL模板</el-button>
        <el-upload style="display: inline-block" :show-file-list="false"
            :action="excelImportUrl"
            :on-success="handleSuccess">
            <el-button size="small" type="primary">上传EXCEL</el-button>
        </el-upload>
    </el-form>
<!--    表格-->
    <el-table
        :data="roleUser"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
            type="index"
            width="100">
        </el-table-column>
        <el-table-column
            label="用户名"
            prop="username">
        </el-table-column>
        <el-table-column
            label="姓名"
            prop="realname">
        </el-table-column>
        <el-table-column
            label="拥有角色"
            prop="roleName">
        </el-table-column>
        <el-table-column
            label="是否激活">
            <template slot-scope="scope">
                <span v-if="scope.row.enabled == true" style="color:green">已激活</span>
                <span v-else style="color:red">未激活</span>
            </template>
        </el-table-column>
        <el-table-column
            label="创建时间"
            prop="cratedTime">
        </el-table-column>
        <el-table-column
            label="更新时间"
            prop="updatedTime">
        </el-table-column>
        <el-table-column label="操作" width="250">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="success"
                    @click="handleEditRole(scope.$index, scope.row)">配置角色
                </el-button>
                <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageObj.currentPage"
        :page-sizes="pageObj.pageSizes"
        :page-size="pageObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageObj.total">
    </el-pagination>
<!--    新增模态框-->
    <el-dialog :close-on-click-modal="false" :title="userDialog.form.id == ''?'新增':'修改'" :visible.sync="userDialog.roleVisible" :before-close="userClose">
        <el-form :model="userDialog.form" :rules="userFormRules">
            <el-form-item v-show="false">
                <el-input v-model="userDialog.form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名称:" :label-width="userDialog.formLabelWidth" prop="username">
                <el-input v-model="userDialog.form.username" autocomplete="off" :disabled="userDialog.form.id == '' ? false:true"></el-input>
            </el-form-item>
            <el-form-item label="密码:" :label-width="userDialog.formLabelWidth">
                <el-input v-model="userDialog.form.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" :label-width="userDialog.formLabelWidth">
                <el-input type="password" v-model="userDialog.form.confirmPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名:" :label-width="userDialog.formLabelWidth" prop="realname">
                <el-input v-model="userDialog.form.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否激活:" :label-width="userDialog.formLabelWidth">
                <el-switch v-model="userDialog.form.enabled"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="userDialog.roleVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="insertOrUpdateRole">确 定</el-button>
        </div>
    </el-dialog>
<!--    配置角色模态框-->
    <el-dialog :title="userRoleDialog.title" :visible.sync="userRoleDialog.visible" :before-close="roleClose">
        <el-transfer
            v-model="userRoleDialog.hasRoles"
            :data="allRoles"
            :props="{
                        key: 'uuid',
                        label: 'name'
                    }"
            filterable
            :titles="userRoleDialog.titles"
        >
        </el-transfer>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="userRoleDialog.visible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="updateUserRoles">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>

    var _t = this;
    var Ctor = Vue.extend({
        //提前绑定的变量
        data: function () {
            return {
                // 项目下用户信息
                projectUuid: '',// 项目id
                allRoles: '',
                //查询表单
                userForm: {
                    username: '',
                    roleUuids: '',
                    enabled: ''
                },
                // 显示表格
                roleUser:[],
                // 分页
                pageObj:{
                    currentPage: 1,
                    pageSizes:[10, 20, 30, 50],
                    pageSize:10,
                    total: 0
                },
                // 新增模态框
                userDialog: {
                    roleVisible: false,
                    formLabelWidth: '100px',
                    form: {
                        id: '',
                        username: '',
                        realname: '',
                        password: '',
                        confirmPassword: '',
                        enabled: '',
                    }
                },
                // 角色模态框
                userRoleDialog: {
                    title: '配置角色',
                    titles:['可选角色', '已选角色'],
                    visible: false,
                    userUuid: '',
                    hasRoles: [],
                },
                // 所有角色
                roleOptions: [],
                // 激活状态
                activeOptions: [
                    {
                        value:false,
                        label: '未激活'
                    },{
                        value:true,
                        label: '已激活'
                    }
                ],
                // 验证规则
                userFormRules:{
                    username: [
                        { required: true, message: '用户名必填', trigger: 'change' }
                    ],
                },
                excelImportUrl:this.$magicaltool.request.util.wrapCtxPath("magical_lowcode/manager/user/import-excel"),
                excelExportUrl:this.$magicaltool.request.util.wrapCtxPath("magical_lowcode/manager/user/export-excel")
            }
        },
        //页面加载完 会执行方法 可以做一些初始化操作
        mounted: function () {
            this.getUserRoles()
            this.getProjectUser()
        },
        /*当前页面绑定的方法集合 与布局器节点一一映射即可 参照element ui文档*/
        methods: {
            getUserRoles:function(callback) {
                var _this = this
                this.$magicaltool.request.axios({
                    method: 'get',
                    url: '/magical_lowcode/manager/page/role_select',
                    param: {
                        projectUuid: this.projectUuid,
                    }
                }).then(function (res) {
                    if (res.code == 0){
                        _this.roleOptions = res.data;
                        _this.allRoles = res.data;
                        if(callback){
                            callback();
                        }
                    }else{
                        _this.$message({
                            message: '获取所有角色失败',
                            type: 'error'
                        });
                    }
                });
            },
            getProjectUser:function(){
                var _this = this
                this.$magicaltool.request.axios({
                    method: 'get',
                    url: '/magical_lowcode/manager/user/page',
                    param: {
                        projectUuid: _this.projectUuid,
                        page: _this.pageObj.currentPage,
                        size: _this.pageObj.pageSize,
                        username: _this.userForm.username,
                        roleUuids: _this.userForm.roleUuids,
                        enabled: _this.userForm.enabled,
                    }
                }).then(function (res) {
                    if (res.code == 0){
                        _this.roleUser = res.data.data;
                        _this.pageObj.total = res.data.count;
                    }else{
                        _this.$message({
                            message: '获取用户信息失败',
                            type: 'error'
                        });
                    }
                });
            },
            insertUser:function(){
                var obj = {
                    id: '',
                    username: '',
                    realname: '',
                    password: '',
                    confirmPassword: '',
                    enabled: false,
                };
                this.userDialog.form = obj;
                this.userDialog.roleVisible = true
            },
            handleEdit:function(index, row) {
                var obj = {
                    id: '',
                    username: '',
                    realname: '',
                    password: '',
                    confirmPassword: '',
                    enabled: '',

                };
                obj.id = row.id;
                obj.username = row.username;
                obj.realname = row.realname;
                obj.password = row.password;
                obj.confirmPassword = row.password;
                obj.enabled = row.enabled;
                this.userDialog.form = obj;
                this.userDialog.roleVisible = true
            },
            handleDelete:function(index, row) {
                var _this = this;
                this.$confirm('删除用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(function(){
                    _this.$magicaltool.request.axios({
                        method: 'post',
                        url: '/magical_lowcode/manager/user/del',
                        param: {
                            id: row.id
                        }
                    }).then(function (res) {
                        if (res.code == 0){
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            _this.getProjectUser();
                        }else{
                            _this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    });
                }).catch(function() {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleEditRole:function(index, row) {
                var _t = this;
                this.getUserRoles(function(){
                    _t.userRoleDialog.userUuid = row.id;
                    if (row.roleUuids != null && row.roleUuids != '' && row.roleUuids != undefined){
                        var allRoles = _t.allRoles;
                        var userRoles = [];
                        if(allRoles && allRoles.length>0 && row.roleUuids){
                            for(var i=0;i<allRoles.length;i++){
                                if(row.roleUuids && row.roleUuids.indexOf(allRoles[i].uuid)!=-1){
                                    userRoles.push(allRoles[i].uuid);//用户的角色可能存在已删除情况 所以更新下
                                }
                            }
                        }
                        _t.userRoleDialog.hasRoles = userRoles;
                    }else {
                        _t.userRoleDialog.hasRoles = []
                    }
                    _t.userRoleDialog.visible = true;
                })
            },
            insertOrUpdateRole:function() {
                var _this = this
                if (this.userDialog.form.username == null || this.userDialog.form.username == ''){
                    _this.$message({
                        message: '请输入用户名',
                        type: 'error'
                    });
                    return;
                }
                if(this.userDialog.form.password != this.userDialog.form.confirmPassword){
                    _this.$message({
                        message: '两次密码不一致',
                        type: 'error'
                    });
                    return;
                }
                var url = '';
                var message = '';
                if(this.userDialog.form.id == ''){
                    url = '/magical_lowcode/manager/user/save';
                    message = '新增';
                }else {
                    url = '/magical_lowcode/manager/user/modify';
                    message = '修改';
                }

                this.$magicaltool.request.axios({
                    method: 'post',
                    url: url,
                    param: {
                        id: this.userDialog.form.id,
                        username: this.userDialog.form.username,
                        realname: this.userDialog.form.realname,
                        password: this.userDialog.form.password,
                        enabled: this.userDialog.form.enabled,
                        confirmPassword: this.userDialog.form.confirmPassword,
                        projectUuid: this.projectUuid,
                    }
                }).then(function (res) {
                    if (res.code == 0){
                        _this.$message({
                            message: message+'成功',
                            type: 'success'
                        });
                        _this.getProjectUser()
                        _this.userDialog.roleVisible = false
                    }else{
                        _this.$message({
                            message: message+'失败',
                            type: 'error'
                        });
                    }
                });
            },
            updateUserRoles:function() {
                var _this = this
                this.$magicaltool.request.axios({
                    method: 'post',
                    url: '/magical_lowcode/manager/user/config_role',
                    param: {
                        id: this.userRoleDialog.userUuid,
                        roleUuids: JSON.stringify(this.userRoleDialog.hasRoles),
                    }
                }).then(function (res) {
                    if (res.code == 0){
                        _this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        _this.getProjectUser()
                        _this.userRoleDialog.visible = false;
                    }else{
                        _this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                });
            },
            restuserForm:function() {
                this.userForm.username = ''
                this.userForm.realname = ''
                this.userForm.roleUuids = ''
                this.userForm.enabled = ''
            },
            handleSizeChange:function(val){
                this.pageObj.currentPage = 1;
                this.pageObj.pageSize = val;
                this.getProjectUser()
            },
            handleCurrentChange:function(val){
                this.pageObj.currentPage = val;
                this.getProjectUser()
            },
            userClose:function(done) {
                done();
            },
            roleClose:function(done) {
                done();
            },
            tableRowClassName:function(scope) {
                var row = scope.row;
                var rowIndex = scope.rowIndex;
                if (rowIndex % 2 == 1) {
                    return 'warning-row';
                } else if (rowIndex % 2 == 0) {
                    return 'success-row';
                }
                return '';
            },
            handleSuccess:function (response) {
                if(response.flag){
                    this.$message({type:"success",message:"导入成功"});
                    this.getProjectUser();
                }else {
                    this.$message({type:"error",message:response.desc});
                }
            },
            excelTemplate:function () {
                this.$magicaltool.request.axios(
                    {responseType:'blob',
                        $vue:this,url:this.excelExportUrl,method:'post',param:{}}).
                then(function () {

                })
            }
        }
    });
    new Ctor().$mount('#magicalDragScene');

</script>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
        #magicalDragScene{
            background-color:#fff;
            padding:15px;
        }
</style>
</body>

</html>
